import * as React from 'react';
import { Tag, Input, Tooltip, Button, Select, message } from 'antd';
import Tags from 'components/Tags'
import _ from 'lodash'

import './index.less'

const Option = Select.Option

interface IProps {
  value?: any
  onChange?: Function,
  wordInfo: object,
  showInput: boolean,
  text: string,
  // showCloseIcon: boolean,
  showErrorMessage: boolean,
  changeShowInput?: (arg?: any) => void,
  handleClose?: (arg?: any) => void,
  handleChange?: (arg?: any) => void,
  onChangeLanguage?: (arg?: any) => void,
  saveLanguage?: (arg?: any) => void
}
interface IState {
  tags: any[],
  text: string,
  showInput: boolean,
  languageType: string,
  showCloseIcon: boolean,
  tempChinese: string,
  showErrorMessage: boolean
}

class AddLanguageTag extends React.Component <IProps, IState> {
  constructor(props) {
    super(props)
    const {text} = props
    this.state = {
      tags: props.value && props.value.length > 0 ? props.value : [],
      text,
      showInput: props.showInput,
      languageType:'',
      showCloseIcon: false,
      tempChinese: '',
      showErrorMessage: false
    }
  }

  componentWillReceiveProps(props, state) {
    if (props.showErrorMessage !== this.state.showErrorMessage) {
      this.setState({
        showErrorMessage: props.showErrorMessage
      })
    }
  }

   // 删除一个标签
 handleClose = (removedTag) => {
  const tags = this.props.value.filter(tag => tag.id !== removedTag.id);
  this.props.onChange(tags)
}

// 修改选择语言类型
handleChange = value => {
  this.setState({ languageType: value });
}

// 输入语言内容
onChangeLanguage = (e) => {
  this.setState({ text: e.target.value });
}

// 修改显示新建按钮
changeShowInput = value => {
  if (value) {
    this.setState({
      languageType: '',
      text: '',
      showCloseIcon: true,
    })
  }
  this.setState({
    showInput: value,
    showErrorMessage: false
  })
}

// 保存一条语言
saveLanguage = () => {
  if (!this.state.languageType) {
    this.setState({
      showErrorMessage: true
    })
    message.error('请选择语言类型！')
    return
  }
  if (!this.state.text) {
    this.setState({
      showErrorMessage: true
    })
    message.error('请填写语言内容！')
    return
  }
  let tags = this.props.value
  tags.push({
    tag: this.state.languageType,
    content: this.state.text,
    id: Number(Math.random().toString().substr(3,10) + Date.now()).toString(36)
  })
  this.props.onChange(tags)
  this.changeShowInput(false)


}
  render() {
    let tags = this.props.value
    const { showInput } = this.state
    let options = [
      {value: 'english', label: '英文'}, {value: 'japanese', label: '日文'}, {value: 'french', label: '法文' }, {value: 'german', label: '德文'}
    ]
    let newOptions = options.filter(item => {
      return _.indexOf(_.map(tags, 'tag'), item.value) === -1
    })
    return (
    <div className="language-tag">
      {(!showInput && tags.length !== 4) && <Button icon="plus" onClick={() => this.changeShowInput(true)}>新建</Button>}
      {showInput && <div className="create-wrap">
          <div className={this.state.showErrorMessage ? 'left errormessage': 'left'}>
          <Select style={{ width: 120 }} onChange={this.handleChange} placeholder="请选择" notFoundContent='类型不能重复'>
            {newOptions.map((item, index) => {
              return <Option key={`${index}`}  value={item.value}>{item.label}</Option>
            })}
          </Select>
          <Input onChange={this.onChangeLanguage} value={this.state.text}/>
          </div>
          <div className="right">
            <div className="icon confirm" onClick={this.saveLanguage}><img src="assets/images/check-circle.svg" alt=""/></div>
            {this.state.showCloseIcon && <div className="icon cancle" onClick={() => this.changeShowInput(false)}><img src="assets/images/close-circle.svg" alt=""/></div>}
          </div>
      </div>}
      <div className="tags">
        <Tags tags={tags} handleClose={this.handleClose} closable={true}/>
      </div>
    </div>
    )
  }
}

export default AddLanguageTag
